<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/echarts-4.0.js"></script>
	</head>
	<body style="display: flex;justify-content: center;align-items: center;">
		<div id="#app" style="width: 1000px;height: 600px;">

		</div>
		<script type="text/javascript">
			var myChart = echarts.init(document.getElementById('#app'));
			var option = {
				// 以下为部分Echart配置项说明，详细信息参照官方文档https://echarts.apache.org/zh/option.html
				
				// 标题文字，可以加上subtext作为标题
				title: {
					text: '项目实施进度表'
				},
				// 图例组件，位于表格最下方，可以点击查看某一单个数据
				legend: {
					y: 'bottom',
					data: ['计划时间', '实际时间']
				},
				// x轴，指定数据类型time，可以设置min与max指定最大最小值
				xAxis: {
					type: 'time'
				},
				// y轴，默认的数据类型为category，官方文档称为类目，data中为数据
				yAxis: {
					data: ['任务一', '任务二', '任务三', '任务四', '任务五']
				},
				// 提示框组件，trigger为触发类型，一般柱状图通常使用axis，formatter自定义显示的数据格式
				// 可以自己通过控制台打印方式查看参数中的数据属性，自定义提示框信息
				tooltip: {
					trigger: 'axis',
					formatter: function(params) {
						var res = params[0].name + '</br>'
						var date0 = params[0].data
						var date1 = params[1].data
						var date2 = params[2].data
						var date3 = params[3].data
						date0 = date0.getFullYear() + '-' + (date0.getMonth() + 1) + '-' + date0.getDate()
						date1 = date1.getFullYear() + '-' + (date1.getMonth() + 1) + '-' + date1.getDate()
						date2 = date2.getFullYear() + '-' + (date2.getMonth() + 1) + '-' + date2.getDate()
						date3 = date3.getFullYear() + '-' + (date3.getMonth() + 1) + '-' + date3.getDate()
						res += params[0].seriesName + '~' + params[1].seriesName + ':</br>' + date0 + '~' + date1 + '</br>'
						res += params[2].seriesName + '~' + params[3].seriesName + ':</br>' + date2 + '~' + date3 + '</br>'
						console.log(params[0])
						return res
					}
				},
				// 数据部分，采用数据堆叠的方式
				series: [{
						name: '计划开始时间',
						type: 'bar',
						stack: 'test1',
						itemStyle: {
							normal: {
								color: 'rgba(0,0,0,0)'
							}
						},
						data: [
							new Date('2015/09/2'),
							new Date('2015/09/15'),
							new Date('2015/09/15'),
							new Date('2015/10/03'),
							new Date('2015/10/04')
						]
					},
					{
						name: '计划时间',
						type: 'bar',
						stack: 'test1',
						itemStyle: {
							normal: {
								color: '#F98563'
							}
						},
						data: [
							new Date('2015/09/12'),
							new Date('2015/09/20'),
							new Date('2015/09/25'),
							new Date('2015/10/05'),
							new Date('2015/10/07')
						]
					},
					{
						name: '实际开始时间',
						type: 'bar',
						stack: 'test2',
						itemStyle: {
							normal: {
								color: 'rgba(0,0,0,0)'
							}
						},
						data: [
							new Date('2015/09/2'),
							new Date('2015/09/15'),
							new Date('2015/09/15'),
							new Date('2015/10/03'),
							new Date('2015/10/04')
						]
					},
					{
						name: '实际时间',
						type: 'bar',
						stack: 'test2',
						itemStyle: {
							normal: {
								color: '#A2E068'
							}
						},
						data: [
							new Date('2015/09/6'),
							new Date('2015/09/20'),
							new Date('2015/09/27'),
							new Date('2015/10/11'),
							new Date('2015/10/16')
						]
					}
				]
			}
			myChart.setOption(option)
			console.log(option.tooltip.axisPointer)
		</script>
	</body>
</html>
